<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<link href="css/bootstrap.css" rel="stylesheet">
		<script src="js/jquery-3.6.0.js"></script>
		<script src="js/mock-min.js"></script>
		<script src="js/server.js"></script>
		<script src="js/jquery.validate.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {

				// $("#commentForm").validate();

				$("#signupForm").validate({
					rules: {
						password: {
							required: true,
							minlength: 3
						},
						email: {
							required: true,
							email: true
						}
					},
					messages: {
						password: {
							required: "Please provide a password",
							minlength: "Your password must be at least 3 characters long"
						},
						email: "Please enter a valid email address"
					},
					errorElement: "em",
					errorPlacement: function(error, element) {
						// Add the `help-block` class to the error element
						error.addClass("help-block");

						if (element.prop("type") === "checkbox") {
							error.insertAfter(element.parent("label"));
						} else {
							error.insertAfter(element);
						}
					},
					highlight: function(element, errorClass, validClass) {
						$(element).parents(".form-group").addClass("has-error").removeClass("has-success");
					},
					unhighlight: function(element, errorClass, validClass) {
						$(element).parents(".form-group").addClass("has-success").removeClass("has-error");
					},
					submitHandler: function(form) {
						// jQuery(form).ajaxSubmit({
						// 	target: "#result"
						// });
						const user = {
							email: $('#exampleInputEmail3').val(),
							password: $('#exampleInputPassword3').val()
						}
						
						$.ajax({
							url: '/login',
							type: 'post',
							dataType: 'json',
							data: JSON.stringify(user),
							success: function(data) {
								if (data.code == 200) {
									location.href = "index.html"
								} else {
									let error = `<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
								                   <span id="inputError2Status" class="sr-only">(error)</span>`;
									$('.form-group').addClass("has-error has-feedback").append(
										error);
								}
							},
							error: function() {
								console.log("error");
							}
						})
					}
				});

				$('.btn-primary').click(function() {
					// console.log("ddd");
					const user = {
						email: $('#exampleInputEmail3').val(),
						password: $('#exampleInputPassword3').val()
					}
					// console.log(user);
					/* $.ajax({
						url: '/login',
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(user),
						success: function(data) {
							if (data.code == 200) {
								location.href = "main.html"
							} else {
								let error = `<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
							                   <span id="inputError2Status" class="sr-only">(error)</span>`;
								$('.form-group').addClass("has-error has-feedback").append(error);
							}
						},
						error: function() {
							console.log("error");
						}
					}) */
				})
			})
		</script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-lg-3 col-lg-offset-4">
					<form id="signupForm" action="">
						<h2>学生管理系统</h2>
						<div class="form-group">
							<label class="sr-only" for="exampleInputEmail3">Email address</label>
							<input type="email" name="email" class="form-control" id="exampleInputEmail3"
								placeholder="Email">
						</div>
						<div class="form-group">
							<label class="sr-only" for="exampleInputPassword3">Password</label>
							<input type="password" name="password" class="form-control" id="exampleInputPassword3"
								placeholder="Password">
						</div>
						<div class="checkbox">
							<label>
								<input type="checkbox"> 记住我
							</label>
						</div>
						<button type="submit" class="btn btn-primary btn-block">
							登录
						</button>
					</form>
				</div>

			</div>

		</div>

	</body>
</html>
